<template>
  <div class="Supplier">
    <div class="head clear">
      <div v-if="!Ftype" class="btnTop clear">
        <GRButton class="goodsTopL" :btnText="btnText" @reshow="dataShow" />
        <div class="goodsTopR">
          <Search :text="text" :inputstyle="inputstyle" @data="upState" @easySearch="SearchBtn" />
        </div>
      </div>
      <SearchItem class="searchItem" v-show="state" @HighSearch="HighSearch"> </SearchItem>
    </div>
    <div class="commodityContent">
      <TableList :tableData="tableData" :titleList="titleList" :linklist="linklist" :isCheck="isCheck"
        :selWidth="selWidth" :btnState="btnState" :limit="limit" :url="url" @getCheck="getCheck" @reshow="dataShow" />
    </div>
    <delAll class="footer" :checkVal="checkVal" />
    <Paging class="footer" :total="total" @getPage="getPage" @getLimit="getLimit" />
  </div>
</template>

<script>
  import GRButton from "../../../components/GoodsComponent/GoodsRouterButton.vue";
  import Search from "../../../components/Search.vue";
  import SearchItem from "../../../components/GoodsComponent/SupplierItem.vue";
  import TableList from "../../../components/List.vue";
  import delAll from "../../../components/GoodsComponent/GoodsDel.vue";
  import Paging from "../../../components/Paging.vue";
  import { supplierList, supplierSearch, supplierHighSearch } from "../../../http/apis/goodsApi/supplier.js";
  import { mapState, mapMutations, mapActions } from "vuex";
  export default {
    components: {
      Search,
      SearchItem,
      GRButton,
      TableList,
      delAll,
      Paging,
    },
    data() {
      return {
        // 搜索框长度
        inputstyle: 'width: 250px;',
        // 搜索框内容
        text: '请输入供应商/联系人/手机号',
        checkVal: [],
        // 表格数据
        tableData: [],
        limit: 3,
        // 当前页数
        page: 1,
      };
    },
    computed: {
      ...mapState("goodsStore", [
        "Ftype",
        "btnText",
        "url",
        "type",
        "linklist",
        "titleList",
        "selWidth",
        "state",
        "isCheck",
        "total",
        "btnState",
      ]),
    },
    methods: {
      ...mapMutations("goodsStore", ["supplierlist", "upState"]),
      ...mapActions("goodsStore", ["GetCounts"]),
      // 获取选择对象
      getCheck(val) {
        this.checkVal = val;
      },
      // 翻页
      getPage(val) {
        this.page = val;
        this.dataShow();
      },
      // 修改每页显示长度
      getLimit(val) {
        this.limit = val;
        this.dataShow();
      },
      // 渲染数据转格式
      showDataType(datas) {
        let listArr = datas.filter((item) => {
          if (item.su_cooperation == "1") {
            item.su_cooperation = "已合作";
          } else {
            item.su_cooperation = "未合作";
          }
          return item;
        });
        return listArr;
      },
      // 页面渲染
      dataShow() {
        this.GetCounts({ database: this.type })
        supplierList({
          currentPage: this.page,
          pageSize: this.limit,
        })
          .then((res) => {
            console.log("供应商成功请求:", res.data.data);
            if (res.data.code == "200") {
              this.tableData = this.showDataType(res.data.data);
              console.log(this.tableData);
            }
          })
          .catch((err) => {
            console.log("请求失败", err);
          });
      },
      // 模糊搜索
      SearchBtn(val) {
        if (val == '') {
          this.$message({
            type: "warning",
            message: "请输入供应商/联系人/手机号",
            showClose: true,
          });
          return
        }
        supplierSearch({ s: val })
          .then((res) => {
            console.log("搜索成功请求:", res.data.data, res.data.data.length);
            if (res.data.code == "200") {
              if (res.data.data.length == 0) {
                this.$message({
                  type: "warning",
                  message: "未查询到指定内容",
                  showClose: true,
                });
                this.tableData = []
              } else {
                this.$message({
                  type: "success",
                  message: "查询成功",
                  showClose: true,
                });
                this.tableData = this.showDataType(res.data.data);
              }
            }
          })
          .catch((err) => {
            console.log("搜索请求失败", err);
            this.$message({
              type: "error",
              message: "请求失败，请稍后再试",
              showClose: true,
            });
          });
      },
      // 高级搜索
      HighSearch(arr) {
        console.log(arr)
        supplierHighSearch(arr)
          .then((res) => {
            console.log("高级搜索成功请求:", res.data.data, res.data.data.length);
            if (res.data.code == "200") {
              if (res.data.data.length == 0) {
                this.$message({
                  type: "warning",
                  message: "未查询到指定内容",
                  showClose: true,
                });
                this.tableData = []
              } else {
                this.$message({
                  type: "success",
                  message: "查询成功",
                  showClose: true,
                });
                this.tableData = this.showDataType(res.data.data);
              }
            }
          })
          .catch((err) => {
            console.log("搜索请求失败", err);
            this.$message({
              type: "error",
              message: "请求失败，请稍后再试",
              showClose: true,
            });
          });
      }
    },
    created() {
      console.log(this.type)
      this.supplierlist();
      this.GetCounts({ database: this.type });
      this.dataShow();
    },
  };
</script>

<style>
</style>